<template>
  <div class="vip">
    <van-tabs v-model="active" @click="changeTab" >
      <van-tab title="用户">
        <div class="invite_user">
          <div  class="null" v-if="isfull" >
            <img
              src="../../assets/images/nullData.png"
              alt=""
            >
            <p>没有数据</p>
          </div>
          <div class="datalist" v-if="!isfull" >
            <div class="content" v-for="(item,index) in list" :key="index">
              <div class="left">
                <img
                  :src="item.topimg"
                  alt=""
                >
                <div>
                  <p>{{item.mobile}}</p>
                  <p>{{item.truename}}</p>
                </div>
              </div>
              <div class="time">{{item.register_time}}</div>
            </div>
          </div>
        </div>

      </van-tab>
      <van-tab title="商家">
        <div class="invite_user">
          <div  class="null" v-if="storeisfull" >
            <img
              src="../../assets/images/nullData.png"
              alt=""
            >
            <p>没有数据</p>
          </div>
          <div class="storelist" v-if="!storeisfull" >
            <div class="content" v-for="(item,index) in storelist" :key="index">
              <div class="left">
                <img
                  :src="item.topimg"
                  alt=""
                >
                <div>
                  <p>{{item.mobile}}</p>
                  <p>{{item.truename}}</p>
                </div>
              </div>
              <div class="time">{{item.register_time}}</div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

  </div>
</template>
<script>
import { myInvite } from "../../api/user";
export default {
  data() {
    return {
      active: "用户",
      isfull: true,
      list: [],
      storeisfull: true,
      storelist:[],
      searchList: {
        page:1,
        limit:1,
        type:1,
      },
    };
  },
  methods: {

    changeTab(index, title) {
      this.isfull = true;
      if(title =="用户"){
        this.searchList.type = 1;
      }else if(title =="商家"){
        this.searchList.type = 2;
      }
      this.getData();
    },
    getData() {
      myInvite(this.searchList).then(res => {
        console.log(res);
        this.list = res.data.list;
        if (this.list.length > 0) {
          this.isfull = false;
        } else {
          this.isfull = true;
        }
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>
<style lang="scss">
.vip {
  width: 100%;
  padding-bottom: 48px;
  background-color: #f5f5f5;
  header {
    color: #fff;
  }
  .null {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -80%);
    p {
      padding-top: 8px;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
    }
  }
  .content {
    width: 100%;
    height: 70px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    margin-bottom: 5px;
    padding: 0 15px;
    img {
      width: 50px;
      border-radius: 50%;
      margin-right: 5px;
    }
    .left {
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      align-items: center;
      with
       p:nth-child(1) {
         font-size: 16px;
       }
      p:nth-child(2) {
        margin-top: 5px;
        background-color: #f71434;
        padding: 1px;
        border-radius: 5px;
        text-align: center;
        color: #fff;
        font-size: 12px;
      }
    }
    .time {
      font-size: 12px;
      color: #999;
    }
  }
}
</style>

